/**
 * 根据数据创建dom
 * @param {*} data
 */
import moment from "moment";

//医患者端
export function createReportDom(data) {
  const dom = document.querySelector("#report--export");
  let imgs = "";
  if (data.images.length > 0) {
    data.images.forEach((item, index) => {
      if (item.url) {
        if (index === 10 || index === 11) {
          imgs += `<div
          class="preview--img-box"
          style="
            width: 386px;
            height: 217px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 60px 5px 5px 5px;
          "
        >
          <img
            src="${item.url}"
            alt=""
            class="preview--img"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </div>`;
        } else if (index === 22 || index === 23) {
          imgs += `<div
          class="preview--img-box"
          style="
            width: 386px;
            height: 217px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 50px 5px 5px 5px;
          "
        >
          <img
            src="${item.url}"
            alt=""
            class="preview--img"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </div>`;
        } else if (index === 34 || index === 35) {
          imgs += `<div
          class="preview--img-box"
          style="
            width: 386px;
            height: 217px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 50px 5px 5px 5px;
          "
        >
          <img
            src="${item.url}"
            alt=""
            class="preview--img"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </div>`;
        } else {
          imgs += `<div
          class="preview--img-box"
          style="
            width: 386px;
            height: 217px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 5px 5px;
          "
        >
          <img
            src="${item.url}"
            alt=""
            class="preview--img"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </div>`;
        }
      }
    });
  }
  const con = `<div class="report--header" style="width: 100%">
       <div
         class="report--header--item"
         style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: end;
           height: 30px;
           line-height: 30px;
         "
       >
         <span class="report--header--sub" style="color: #000; font-size: 16px"
           >姓名:${data.name}</span
         >
       </div>
       <div
       class="report--header--item"
       style="
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: end;
         height: 30px;
         line-height: 30px;
       "
     >
       <span class="report--header--sub" style="color: #000; font-size: 16px"
         >性别:${data.sex === 1 ? "男" : "女"}</span
       >
     </div>
     <div
     class="report--header--item"
     style="
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: end;
       height: 30px;
       line-height: 30px;
     "
   >
     <span class="report--header--sub" style="color: #000; font-size: 16px"
       >年龄:${data.year}</span
     >
   </div>
       <div
         class="report--header--item"
         style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: end;
           height:30px;
           line-height: 30px;
         "
       >
         <span class="report--header--sub" style="color: #000; font-size: 16px"
           >检查部位:${data.pos}</span
         >
       </div>
 
       <div
       class="report--header--item"
       style="
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: end;
         height: 30px;
         line-height:30px;
       "
     >
       <span class="report--header--sub" style="color: #000; font-size: 16px"
         >检查时间:${moment(data.createdAt).format("YYYY-MM-DD HH:mm:ss")}</span
       >
     </div>
     </div>
     <div
       class="report--img"
       style="
         width: 100%;
         border-top: 1px solid black;
         border-bottom: 1px solid black;
         margin-bottom: 30px;
         display: flex;
         flex-wrap: wrap;
       "
     >
         ${imgs}
     </div>
     <div class="report--word">
       <h2
         class="report--title1"
         style="text-decoration: underline; font-weight: bold"
       >
         临床申请检查内容:
       </h2>
       <p
         class="report--pos"
         style="text-decoration: underline; font-size: 18px"
       >
         ${data.pos}
       </p>
       <h3 class="report--title2" style="font-weight: bold">超声影像所见:</h3>
       <p class="report--con" style="text-indent: 25px">
           ${data.seen}
       </p>
       <h3 class="report--title2" style="font-weight: bold">
         超声影像诊断提示:
       </h3>
       <p class="report--con" style="text-indent: 25px">
           ${data.tips}
       </p>
     </div>
     <div
       class="report--footer"
       style="
         display: flex;
         width: 100%;
         height: 80px;
         align-items: center;
         justify-content: end;
         color: #000;
       "
     >
       <span class="footer--sub" style="color: #000">检查医生:</span>
       <div class="sign--box" style="min-width: 100px;height: 70%;display: flex;align-items: center;justify-content: center">
         <img src="${
           data.doc_sign
         }" alt="" style="height:63%;object-fit:contain;">
       </div>
       <span class="footer--sub" style="color: #000">送检医生:</span>
       <div class="sign--box" style="min-width: 100px;height: 70%;display: flex;align-items: center;justify-content: center">
         <img src="${
           data.pat_sign
         }" alt="" style="height:63%;object-fit:contain;">
       </div>
     </div>`;

  dom.innerHTML = con;

  return dom;
}
//医生端
export function createReportDom2(data) {
  const dom = document.querySelector("#report--export");
  // const dom = document.createElement("div");
  // dom.style.backgroundColor = "#fff";
  // dom.style.width = "900px";
  // dom.style.padding = "50px";

  let imgs = "";
  if (data.images.length > 0) {
    data.images.forEach((item, index) => {
      if (item.url) {
        if (index === 10 || index === 11) {
          imgs += `<div
          class="preview--img-box"
          style="
            width: 386px;
            height: 217px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 60px 5px 5px 5px;
          "
        >
          <img
            src="${item.url}"
            alt=""
            class="preview--img"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </div>`;
        } else if (index === 22 || index === 23) {
          imgs += `<div
          class="preview--img-box"
          style="
            width: 386px;
            height: 217px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 50px 5px 5px 5px;
          "
        >
          <img
            src="${item.url}"
            alt=""
            class="preview--img"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </div>`;
        } else if (index === 34 || index === 35) {
          imgs += `<div
          class="preview--img-box"
          style="
            width: 386px;
            height: 217px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 50px 5px 5px 5px;
          "
        >
          <img
            src="${item.url}"
            alt=""
            class="preview--img"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </div>`;
        } else {
          imgs += `<div
          class="preview--img-box"
          style="
            width: 386px;
            height: 217px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 5px 5px;
          "
        >
          <img
            src="${item.url}"
            alt=""
            class="preview--img"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </div>`;
        }
      }
    });
  }
  const con = `<div class="report--header" style="width: 100%">
       <div
         class="report--header--item"
         style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: end;
           height: 30px;
           line-height: 30px;
         "
       >
         <span class="report--header--sub" style="color: #000; font-size: 16px"
           >姓名:${data.name}</span
         >
       </div>
       <div
       class="report--header--item"
       style="
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: end;
         height: 30px;
         line-height: 30px;
       "
     >
       <span class="report--header--sub" style="color: #000; font-size: 16px"
         >性别:${data.sex === 1 ? "男" : "女"}</span
       >
     </div>
     <div
     class="report--header--item"
     style="
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: end;
       height: 30px;
       line-height: 30px;
     "
   >
     <span class="report--header--sub" style="color: #000; font-size: 16px"
       >年龄:${data.year}</span
     >
   </div>
       <div
         class="report--header--item"
         style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: end;
           height:30px;
           line-height: 30px;
         "
       >
         <span class="report--header--sub" style="color: #000; font-size: 16px"
           >检查部位:${data.pos}</span
         >
       </div>
 
       <div
       class="report--header--item"
       style="
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: end;
         height: 30px;
         line-height:30px;
       "
     >
       <span class="report--header--sub" style="color: #000; font-size: 16px"
         >检查时间:${moment(data.createdAt).format("YYYY-MM-DD HH:mm:ss")}</span
       >
     </div>
     </div>
     <div
       class="report--img"
       style="
         width: 100%;
         border-top: 1px solid black;
         border-bottom: 1px solid black;
         margin-bottom: 60px;
         display: flex;
         flex-wrap: wrap;
       "
     >
         ${imgs}
     </div>
     <div class="report--word">
       <h2
         class="report--title1"
         style="text-decoration: underline; font-weight: bold"
       >
         临床申请检查内容:
       </h2>
       <p
         class="report--pos"
         style="text-decoration: underline; font-size: 18px"
       >
         ${data.pos}
       </p>
       <h3 class="report--title2" style="font-weight: bold">超声影像所见:</h3>
       <p class="report--con" style="text-indent: 25px">
           ${data.seen}
       </p>
       <h3 class="report--title2" style="font-weight: bold">
         超声影像诊断提示:
       </h3>
       <p class="report--con" style="text-indent: 25px">
           ${data.tips}
       </p>
     </div>
     <div
       class="report--footer"
       style="
         display: flex;
         width: 100%;
         height: 80px;
         align-items: center;
         justify-content: end;
         color: #000;
       "
     >
       <span class="footer--sub" style="color: #000">检查医生:</span>
       <div class="sign--box" style="min-width: 100px;height: 70%;display: flex;align-items: center;justify-content: center">
         <img src="${
           data.doc_sign ? data.doc_sign : ""
         }" alt="" style="height:63%;object-fit:contain;">
       </div>
       <span class="footer--sub" style="color: #000">送检医生:</span>
       <div class="sign--box" style="min-width: 100px;height: 70%;display: flex;align-items: center;justify-content: center">
         <img src="${
           data.pat_sign ? data.pat_sign : ""
         }" alt="" style="height:63%;object-fit:contain;">
       </div>
     </div>`;

  dom.innerHTML = con;

  return dom;
}

export function createReportDom3(data) {
  const dom = document.querySelector("#report--export");
  let imgs = "";
  if (data.images.length > 0) {
    data.images.forEach((item) => {
      if (item.image) {
        imgs += `<div
        class="preview--img-box"
        style="
          width: 386px;
          height: 217px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 5px 5px 5px 5px;
        "
      >
        <img
          src="${item.image}"
          alt=""
          class="preview--img"
          style="width: 100%; height: 100%; object-fit: cover"
        />
      </div>`;
      }
    });
  }
  const con = `<div class="report--header" style="width: 100%">
       <div
         class="report--header--item"
         style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: end;
           height: 30px;
           line-height: 30px;
         "
       >
         <span class="report--header--sub" style="color: #000; font-size: 16px"
           >姓名:${data.name ? data.name : "--"}</span
         >
       </div>
       <div
       class="report--header--item"
       style="
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: end;
         height: 30px;
         line-height: 30px;
       "
     >
       <span class="report--header--sub" style="color: #000; font-size: 16px"
         >性别:${data.sex === 1 ? "男" : "女"}</span
       >
     </div>
     <div
     class="report--header--item"
     style="
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: end;
       height: 30px;
       line-height: 30px;
     "
   >
     <span class="report--header--sub" style="color: #000; font-size: 16px"
       >年龄:${data.year}</span
     >
   </div>
       <div
         class="report--header--item"
         style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: end;
           height:30px;
           line-height: 30px;
         "
       >
         <span class="report--header--sub" style="color: #000; font-size: 16px"
           >检查部位:${data.pos ? data.pos : "--"}</span
         >
       </div>
 
       <div
       class="report--header--item"
       style="
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: end;
         height: 30px;
         line-height:30px;
       "
     >
       <span class="report--header--sub" style="color: #000; font-size: 16px"
         >检查时间:${moment(data.createdAt).format("YYYY-MM-DD HH:mm:ss")}</span
       >
     </div>
     </div>
     <div
       class="report--img"
       style="
         width: 100%;
         border-top: 1px solid black;
         border-bottom: 1px solid black;
         margin-bottom: 60px;
         display: flex;
         flex-wrap: wrap;
       "
     >
         ${imgs}
     </div>
     <div class="report--word">
       <h2
         class="report--title1"
         style="text-decoration: underline; font-weight: bold"
       >
         临床申请检查内容:
       </h2>
       <p
         class="report--pos"
         style="text-decoration: underline; font-size: 18px"
       >
         ${data.pos ? data.pos : "--"}
       </p>
       <h3 class="report--title2" style="font-weight: bold">超声所见:</h3>
       <p class="report--con" style="text-indent: 25px">
           ${data.seen ? data.seen : "--"}
       </p>
       <h3 class="report--title2" style="font-weight: bold">
         超声提示:
       </h3>
       <p class="report--con" style="text-indent: 25px;padding:20px 0;">
           ${data.tips ? data.tips : "--"}
       </p>
     </div>
     <div
       class="report--footer"
       style="
         display: flex;
         width: 100%;
         height: 80px;
         align-items: center;
         justify-content: end;
         color: #000;
         border-top: 1px solid #000;
         position: relative;
       "
     >
      <span class="footer--sub--tips"      
        style="
        color: #000;
        position: absolute;
        left: 0px;
        top:5px;
        font-weight: bold;">此报告为辅助诊断,仅供临床诊断参考.</span>
       <span class="footer--sub" style="color: #000">检查医生:</span>
       <div class="sign--box" style="min-width: 100px;height: 70%;display: flex;align-items: center;justify-content: center">
         <img src="${
           data.doc_sign ? data.doc_sign : ""
         }" alt="" style="height:63%;object-fit:contain;">
       </div>
       <span class="footer--sub" style="color: #000">送检医生:</span>
       <div class="sign--box" style="min-width: 100px;height: 70%;display: flex;align-items: center;justify-content: center">
         <img src="${
           data.pat_sign ? data.pat_sign : ""
         }" alt="" style="height:63%;object-fit:contain;">
       </div>
     </div>`;

  dom.innerHTML = con;

  return dom;
}
